<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <select-address
          v-model="params.address_code"
          placeholder="地址查询"
          auto-top
          clearable
          @change="getData()"
        ></select-address>
      </el-form-item>
      <!-- <el-form-item>
        <select-credit-goods clearable
                             filterable
                             default-first-option
                             v-model="searchDamId"
                             @select="name=>params.project_type_name=name"
                             placeholder="产业包名称"></select-credit-goods>
      </el-form-item> -->
      <el-form-item>
        <el-input
          placeholder="主体名称"
          clearable
          v-model="params.customer_name"
          @keyup.enter.native="getData()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <c-select
          placeholder="企业类型"
          @change="getData()"
          clearable
          :options="enumCompanyType"
          v-model="params['org_class.eq']"
        ></c-select>
      </el-form-item>
      <!-- <el-form-item>
        <c-select placeholder="级别"
                  @change="getData()"
                  clearable
                  :options="enumCompanyLevel"
                  v-model="params['lever_type.eq']"></c-select>
      </el-form-item> -->
      <el-form-item>
        <c-select
          placeholder="产业环节"
          clearable
          :options="[
            { value: '种繁' },
            { value: '饲料' },
            { value: '养殖' },
            { value: '屠宰' },
            { value: '加工' },
          ]"
          :props="{ value: 'value', label: 'value' }"
          @change="getData()"
          v-model="params.parent_main_business"
        ></c-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getData()" :loading="loading">查询</el-button>
      </el-form-item>
    </el-form>

    <c-table border class="table-sm" v-loading="loading" :columns="tableColumns" :data="tableData">
      <template v-slot:recommendApproval="scope">
        <div :class="`text-center text-${scope.row.recommendApprovalColor}`">
          {{ scope.row.recommendApprovalLabel }}
        </div>
      </template>
    </c-table>
    <div class="query-pagination">
      <div></div>
      <el-pagination
        layout="total, prev, pager, next, jumper"
        :current-page.sync="params.index"
        :page-size="params.size"
        :total="tableCount"
        @current-change="getData"
      ></el-pagination>
    </div>

    <white-list-approval
      :visible.sync="approvalVisible"
      :white-data="approvalRow"
      @success="getData(params.index)"
    ></white-list-approval>

    <el-dialog
      :visible.sync="applyFormVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="1000px"
    >
      <approval-table :infoData="applyFormRow" :viewMode="true"></approval-table>
    </el-dialog>

    <el-dialog
      :visible.sync="reportVisible"
      :close-on-click-modal="false"
      append-to-body
      top="30px"
      width="80%"
    >
      <el-tabs>
        <el-tab-pane label="数字档案卡">
          <white-credit
            :query-id="reportWhiteId"
            view-mode
            @success="getData(params.index)"
          ></white-credit>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <industry-attach :visible.sync="attachVisible" :infoData="attachData"></industry-attach>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { enumProjectStatus, enumCompanyType, enumCompanyLevel } from '@/gov/plugins/enum'

import SelectAddress from '@/components/select/SelectAddress'
// import SelectCreditGoods from '@/gov/components/select/SelectCreditGoods'
import WhiteCredit from '@/credit/components/creditFile/WhiteCredit'
import WhiteListApproval from '@/bank/views/program/WhiteListApproval'
import ApprovalTable from '@/gov/views/index/task/ApprovalTable'
import { getRecommendLabel } from '@/gov/views/business/WhiteList'
import IndustryAttach from '@/gov/views/index/task/Attach'
export default {
  components: {
    IndustryAttach,
    SelectAddress,
    // SelectCreditGoods,
    WhiteCredit,
    WhiteListApproval,
    ApprovalTable,
  },
  props: {
    industrialPackage: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      enumCompanyType,
      enumCompanyLevel,
      searchDamId: '',
      params: {
        index: 1,
        size: 15,
      },
      order: {
        create_time: 'desc',
      },
      tableName: 'project_white_list_view',
      tableData: [],
      tableColumns: [
        { attrs: { label: '所属地区', prop: 'address' } },
        { attrs: { label: '主体名称', prop: 'customer_name' } },
        { attrs: { label: '经营者姓名', prop: 'corp_name' } },
        { attrs: { label: '身份证号码', prop: 'id_card' } },
        // { attrs: { label: '所属产业包', prop: 'project_type_name' } },
        { attrs: { label: '提交用户', prop: 'submit_person_name' } },
        { attrs: { label: '审批状态', align: 'center' }, slot: 'recommendApproval' },
        { attrs: { label: '本机构受理次数', prop: 'claim_num_db', align: 'center' } },
        { attrs: { label: '其他机构受理次数', prop: 'claim_num_bank', align: 'center' } },
        {
          attrs: { label: '操作', align: 'center', minWidth: 110 },
          operations: [
            {
              content: '受理',
              icon: 'fa fa-legal',
              event: this.handleApproval,
              attrs: { class: 'p-1 m-1' },
            },
            {
              content: '贷款申请表',
              icon: 'fa fa-search',
              event: this.handleApplyForm,
              attrs: { class: 'p-1 m-1' },
            },
            {
              content: '档案卡',
              icon: 'fa fa-file-text',
              event: this.handleView,
              attrs: { class: 'p-1 m-1' },
            },
            {
              content: '附件',
              icon: 'fa fa-clipboard',
              attrs: { class: 'py-1 px-1 mx-1' },
              event: this.handleAttach,
            },
          ],
        },
      ],
      tableCount: 0,
      loading: false,

      reportWhiteId: '',
      reportVisible: false,
      applyFormRow: {},
      applyFormVisible: false,
      approvalRow: {},
      approvalVisible: false,
      attachVisible: false,
      attachData: {},
    }
  },
  computed: {
    ...mapGetters(['user']),
    queryAddress() {
      return this.user.queryAddressCode
    },
    packageId() {
      return this.industrialPackage.industrial_package_id || ''
    },
    packageName() {
      return this.industrialPackage.load_name || ''
    },
  },
  created() {
    this.params.address_code = this.queryAddress
    this.params['project_type_id.eq'] = this.packageId

    // is_finished_form？ project_status？
    this.params['county_approval.eq'] = 1

    this.getData()
  },
  methods: {
    handleAttach(row) {
      this.attachVisible = true
      this.attachData = { ...row }
    },
    fetchData(params) {
      return this.$utils.promise(
        this.$api.getData(this.$serviceName, this.tableName, params, this.order || {})
      )
    },
    async getData(index = 1) {
      this.params.index = index
      this.loading = true
      const [res = {}] = await this.fetchData(this.params)
      const data = res.data || {}
      this.tableData = (data.data || []).map(this.dataAdapter)
      this.tableCount = data.totalCount || 0
      this.loading = false
    },
    dataAdapter(item) {
      item.projectStatusLabel = enumProjectStatus[item.project_status]

      const recommendApprovalStatus = getRecommendLabel(item)
      item.recommendApprovalLabel = recommendApprovalStatus.label
      item.recommendApprovalColor = recommendApprovalStatus.style

      return item
    },
    handleApproval(row) {
      this.approvalRow = row
      this.approvalVisible = true
    },
    handleApplyForm(row) {
      this.applyFormRow = row
      this.applyFormVisible = true
    },
    handleView(row) {
      this.reportWhiteId = row ? row.project_white_list_id : ''
      this.reportVisible = true
    },
  },
}
</script>
<style lang="scss" scoped></style>
